<template>
    <div class="collect-rule-box">
        <div v-for="(item, index) in ruleList" :key="index">
            <el-form :model="item" :rules="rules" :ref="`rule-${index}`" :inline="false" label-width="120px" class="act-rule-form">
                <el-form-item label="奖励规则名称" prop="ruleName" required>
                    <el-input v-model="item.ruleName" style="width:300px"></el-input>
                </el-form-item>
                <el-form-item label="奖励规则明细" prop="ruleDetail" required>
                    <el-input v-model="item.ruleDetail" autosize type="textarea" style="width:300px"></el-input>
                </el-form-item>
                <el-form-item label="备注">
                    <el-input v-model="item.remark" autosize type="textarea" style="width:300px"></el-input>
                </el-form-item>
                <div class="btn-wrap">
                    <el-button type="primary" @click="addModule(index, 'before')">向上添加</el-button>
                    <el-button type="primary" @click="addModule(index, 'after')">向下添加</el-button>
                    <el-button type="primary" @click="delModule(index)" v-if="index > 0">删除</el-button>
                </div>
            </el-form>
        </div>
    </div>
</template>

<script>
export default {
    props: {
        collectionActivityRuleList: {},
        dataChange: {
            type: Function,
            default: null
        }
    },
    data () {
        return {
            ruleList: this.collectionActivityRuleList,
            rules: {
                ruleName: [
                    { required: true, message: '请填写奖励规则名称', trigger: ['blur', 'change'] }
                ],
                ruleDetail: [
                    { required: true, message: '请填写奖励规则明细', trigger: ['blur', 'change'] }
                ]
            }
        }
    },
    watch: {
        'ruleList': {
            handler: function (data) {
                this.dataChange(data)
            },
            immediate: true
        }
    },
    methods: {
        validateForm () {
            let flag = true
            for (let i in this.ruleList) {
                this.$refs[`rule-${i}`][0].validate(valid => {
                    if (!valid) {
                        flag = false
                    }
                })
            }
            this.dataChange(this.ruleList)
            return flag
        },
        // ruleChange () {
        //     this.dataChange(this.ruleList)
        // },
        addModule (index, location) {
            let item = {
                remark: '',
                ruleDetail: '',
                ruleName: ''
            }
            let ind = location === 'after' ? index + 1 : index
            this.ruleList.splice(ind, 0, item)
        },
        delModule (index) {
            this.ruleList.splice(index, 1)
        }
    }
}
</script>

<style lang="scss" scoped>
    .collect-rule-box {
        max-width: 800px;
        .act-rule-form {
            /deep/.el-form-item__content {
                margin-left: 0 !important;
            }
        }
        .btn-wrap {
            margin-left: 120px;
            margin-bottom: 20px;
        }
    }
</style>
